<template>
    <view class="bodys">
        <view class="seleBtn">
            <view class="btn" @click="show = true">{{years}}年<u-icon style="margin-left: 12rpx;" color="#527bed"
                    name="arrow-right"></u-icon> </view>
        </view>
        <view class="recordCon" v-for="(item,index) in dataList" :key="index">
            <view class="contain">
                <view class="title">
                    <p>{{item.comboTypeName}}-{{item.comboName}}</p>
                    <p>{{item.comboAmt}}元</p>
                </view>
                <view class="des">
                    设备编号：{{item.snCode}}
                </view>
                <view class="des">
                    用户编号：{{item.merchantNo}}
                </view>
                <view class="des">
                    订单编号：{{item.orderNo}}
                </view>

                <view class="des">
                    交易状态：<span v-if="item.status===1">交易成功</span>
                    <span v-else-if="item.status===2">交易失败</span>
                    <span v-else>未支付</span>
                </view>
                <view class="des">
                    {{item.time}}
                </view>
            </view>
        </view>

        <view class="list_foot ">
            <view class="no_more" v-if="loadingType == 'nomore'&& dataList.length && !isLoading">
                <text class="line"></text>
                <text class="text">暂无更多数据</text>
                <text class="line"></text>
            </view>

            <view class="no_data" v-if="dataList.length==0 && !isLoading">
                <text class="line"></text>
                <text class="text">暂无数据</text>
                <text class="line"></text>
            </view>
        </view>
        <u-picker :show="show" :columns="columns" @confirm="confirm"></u-picker>
    </view>
</template>

<script>
    import {
        orderList
    } from '@/common/api.js'
    import util from '@/common/utils'
    export default {
        data() {
            return {
                show: false,
                years: '2025',
                columns: [
                    ['2026', '2025', '2024', ]
                ],

                dataList: [
                    // {
                    //     time: '2024-10-08 17:10:57',
                    //     orderNo: '2024102525532522',
                    //     snCode: '6862325222222',
                    //     merchantNo: '202433522232',
                    //     comboAmt: '399',
                    //     comboName: '1500GB/月*12个月'
                    // }, {
                    //     time: '2024-10-08 17:10:57',
                    //     orderNo: '2024102525532522',
                    //     snCode: '6862325222222',
                    //     merchantNo: '202433522232',
                    //     comboAmt: '399',
                    //     comboName: '1500GB/月*12个月'
                    // },
                ],
                isLoading: false,
                params: {
                    "pageNum": 1,
                    "pageSize": 20,
                    "merchantId": "",
                    "year": "2025"
                },

                loadingType: 'more',
                userInfo: ''
            }
        },
        onLoad() {
            // this.getMerchantId = util.getMerchantId()
            this.params.merchantId = util.getMerchantId()
            this.getData()

        },

        // 下拉刷新
        onPullDownRefresh() {
            this.params.pageNum = 1;
            this.dataList = [];
            this.getData('refresh');
        },
        // 加载更多
        onReachBottom() {
            if (this.loadingType === 'nomore' || this.dataList.length === 0) return;
            this.params.pageNum++;
            this.getData();
        },

        methods: {
            confirm(e) {
                this.params.year = this.years = e.value[0]
                this.getData()
                this.show = false

            },
            getData(type) {
                if (this.isLoading) return;
                this.isLoading = true;
                orderList(this.params).then((res) => {
                    if (type === 'refresh') {
                        this.dataList = []
                        uni.stopPullDownRefresh();
                    }
                    this.isLoading = false;
                    this.dataList = res.data.content
                    const dataList = res.data.content

                    if (dataList.length === this.params.pageSize && this.params.pageNum != res.data
                        .totalPages) {
                        this.loadingType = 'more'
                    } else {
                        this.loadingType = 'nomore'
                    }
                    // this.loadingType = dataList.length === this.params.pageSize ? 'more' : 'nomore';
                    if (this.params.pageNum == 1) {
                        this.dataList = dataList;
                    } else {
                        this.dataList = [...this.dataList, ...dataList];
                    }




                }).catch(e => {
                    this.isLoading = false;
                    uni.stopPullDownRefresh();
                });
            }
        }
    }
</script>

<style lang="scss" scoped>
    .bodys {
        background-color: #f7f8fa;
        width: 100%;
        min-height: 100vh;
        box-sizing: border-box;

        .seleBtn {
            height: 100rpx;
            display: flex;
            align-items: center;
            width: 95%;
            margin-left: 3%;
            margin-bottom: -20rpx;

            .btn {
                height: 60rpx;
                text-align: center;
                line-height: 60rpx;
                font-size: 28rpx;
                width: 200rpx;
                background-color: #e6ebf9;
                color: #527bed;
                border-radius: 50rpx;
                border: 1px solid #527bed;
                display: flex;
                justify-content: center;
            }
        }

        .recordCon {
            height: 340rpx;
            width: 100%;
            display: flex;
            align-items: center;
            width: 95%;
            margin-left: 2.5%;
            margin-top: 25rpx;
            background-color: #fff;
            border-radius: 20rpx;

            .contain {
                width: 92%;
                margin-left: 4%;
            }

            .title {
                display: flex;
                justify-content: space-between;
            }

            .des {
                color: #999;
                margin-top: 8rpx;
                font-size: 28rpx;
            }
        }
    }
</style>